<template>
  <view class="interests">
    <view class="interest-container">
      <view class="header">
        <view>专属权益</view>
        <view @click="handleShowFilter(true)">
          {{activeOrg.name || '全部机构'}}<image src="./../../static/icon_state_off.png"></image>
        </view>
      </view>
      <view class="search-list" v-show="showFilter">
        <scroll-view scroll-y="true" scroll-with-animation="true" class="search-container">
          <view class="search-list_item" v-for="(item,index) of orgList" :key="index" @click="handleCkOrg(item)">
            <view>
              {{item.name}}
              <image src="./../../static/success.png" v-if="item.check"></image>
            </view>
          </view>
        </scroll-view>
      </view>

      <scroll-view scroll-y="true" scroll-with-animation="true" class="interest-list" v-if="listOrg.length>0">
        <view v-for="(dataKey,keyIndex) of listOrg" :key="'org'+keyIndex">
          <view>
            <view class="interest-title">{{dataKey.name}}</view>
            <view class="interest-item" v-for="(item,index) of data[dataKey.name]" :key="'item'+index" @click="handleRevice(item)">
              <image :src="item.productImageUrl" class="logo"></image>
              <view class="right-container">
                <view>{{item.productName}}</view>
                <view>{{item.productInfo}}</view>
                <view>
                  <image src="./../../static/date.png"></image>
                  有效期：{{item.effType===0?"永久有效":""}}
                  {{item.effType===1?calcTime(item.createTime,item.validDay):""}}
                  {{item.effType===2?item.startTime+'至'+item.endTime:""}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="empty-data" v-if="listOrg.length<=0">
        <image src="./../../static/empty_state.png"></image>
        <view>暂无权益</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      orgList: [],
      showFilter: false,
      activeOrg: {},
      list: [],
      data: {},
      listOrg: []
    }
  },
  onLoad (option) {
    this.getProduct()
  },
  mounted () {
    document.querySelector('body').onclick = (e) => {
      let prevClass = e.target._prevClass
      if (prevClass === 'search-list' || prevClass === 'uni-scroll-view-content') {
        this.handleShowFilter(false)
      }
    }
  },
  methods: {
    // 展示筛选
    handleShowFilter (flag) {
      this.showFilter = flag
    },
    // 选中机构
    handleCkOrg (item) {
      this.orgList.map(item => {
        item.check = false
      })
      item.check = !item.check
      if (item.check) {
        this.activeOrg = item
        if (item.name === '全部机构') {
          let tmpList = JSON.parse(JSON.stringify(this.orgList))
          this.listOrg = tmpList.splice(1)
        } else {
          this.listOrg = [item]
        }
      }
      this.handleShowFilter(false)
    },
    // 领取权益
    async handleRevice (item) {
      this.$navigateTo(`../validateInterests/index?orderId=${item.id}&type=0`)
    },
    // 查询权益
    async getProduct () {
      try {
        this.$showLoading()
        let params = {
          orgId: '',
          memberId: this.$getStorageSync('memberId')
        }
        const res = await this.$Api.mxp_api('api-shop-member/shop/interest/user/receive/selectInterestsUserReceive', 'GET', params, true)
        this.$hideLoading()
        if (res.resp_code === 0) {
          this.data = res.datas || []
          let orgNames = Object.keys(this.data)
          let tmpOrg = []
          this.orgList.unshift({
            name: "全部机构",
            check: true
          })
          orgNames.map(item => {
            tmpOrg.push({
              name: item
            })
            this.orgList.push({
              name: item,
              check: false
            })
          })
          this.listOrg = tmpOrg
        } else {
          this.$showToast(res.resp_msg)
        }
      } catch (e) {
        this.$hideLoading()
      }
    },
  },
  onPullDownRefresh () {
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
}
</script>

<style lang="scss">
page {
  background-color: #f6fafd;
}

.interests {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.interest-container {
  height: 100%;
  .header {
    padding: 48rpx 40rpx;
    display: flex;
    justify-content: space-between;
    background: url("./../../static/interest-bg.png") no-repeat;
    background-size: 100% 318rpx;
    display: flex;
    view:first-child {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #232a35;
    }
    view:last-child {
      display: flex;
      justify-content: center;
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      align-items: center;
      image {
        margin-left: 8rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .search-list {
    position: absolute;
    width: 100%;
    top: 122rpx;
    z-index: 999;
    height: 100vh;

    &::before {
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      background: rgba(0, 0, 0, 0.6);
    }
    .search-list_item {
      width: 100%;
      padding: 24rpx 24rpx;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #323233;
      border-bottom: 1px solid #ebedf0;
      image {
        width: 36rpx;
        height: 36rpx;
      }
      view {
        display: flex;
        justify-content: space-between;
        width: calc(100% - 48rpx);
      }
    }
    .search-container {
      padding-bottom: 0 !important;
      position: absolute;
      top: 0;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 700rpx;
    }
  }

  .interest-list {
    height: calc(100vh - 144rpx);
    position: absolute;
    padding: 32rpx 20rpx;
    width: calc(100% - 40rpx);
    top: 124rpx;
    background: rgba(247, 248, 252, 1);
    border-radius: 32rpx 32rpx 0px 0px;
    padding-top: 0;
    .interest-title {
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #232a35;
      padding-top: 40rpx;
      padding-left: 16rpx;
    }
    .interest-item {
      background: #fff;
      display: flex;
      margin-top: 24rpx;
      border-radius: 16rpx;
      padding: 32rpx;
      .logo {
        width: 128rpx;
        height: 128rpx;
        border-radius: 4rpx;
      }
      .right-container {
        padding-left: 16rpx;
        display: flex;
        flex-direction: column;
        view {
          font-size: 20rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.6);
          padding-bottom: 8rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 500rpx;
        }
        view:first-child {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.9);
        }
        view:last-child {
          display: flex;
          align-items: center;
          image {
            margin-right: 8rpx;
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
    }
  }
}

.empty-data {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 170rpx;
  image {
    width: 320rpx;
    height: 320rpx;
  }
  view {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
}
</style>
